<!-- 忘记密码 -->
<template>
	<view class="forget-content">
		<view class="forget-body">
			<view class="line"></view>
			<view class="forget-mian">
				<view class='form-item'>
					<u-field v-model="queryForm.old_password" label=" " type="password" label-width="0" placeholder="请输入原密码">
						<image slot="icon" class="input-icon" src="../../static/loginIcon/password.png" mode=""></image>
					</u-field>
				</view>
				<view class='form-item'>
					<u-field v-model="queryForm.password" label=" " type="password" label-width="0"
						placeholder="请设置新登录密码">
						<image slot="icon" class="input-icon" src="../../static/loginIcon/password.png" mode=""></image>
					</u-field>
				</view>
				<view class='form-item'>
					<u-field v-model="queryForm.password_confirmation" label=" " type="password" label-width="0"
						placeholder="确认新登录密码">
						<image slot="icon" class="input-icon" src="../../static/loginIcon/password.png" mode=""></image>
					</u-field>
				</view>
				<view class="submit-btn">
					<u-button shape="circle" :custom-style="customStyle" @click='updatePWD' >确认修改</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		updatePWD
	} from "@/api/login.js"
	export default {
		data() {
			return {
				queryForm: {
					old_password:'',
					password:'',
					password_confirmation:''
				},
				// 验证码参数
				tips: '',
				seconds: 60,
				// 按钮样式
				customStyle: {
					color: '#fff',
					background: "#4286F4"
				},
			}
		},
		methods: {
			updatePWD(){
				if (this.queryForm.old_password == '') {
					this.$u.toast('请输入原密码');
					return
				}
				if (this.queryForm.password == '') {
					this.$u.toast('请输入新登录密码');
					return
				}
				if (this.queryForm.password != this.queryForm.password_confirmation) {
					this.$u.toast('两次密码不相同');
					return
				}
				updatePWD(this.queryForm).then(res=>{
					uni.showToast({
						title:'修改成功',
						icon:'success',
						duration:800
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-field {
		padding: 20rpx 10rpx !important;
		width: 100%;
	}

	/deep/ .u-field__input-wrap {
		letter-spacing: 4rpx;
	}
	
	

	.line {
		background-color: #F6F8F9;
		width: 100%;
		height: 16rpx;
	}

	.forget-mian {
		padding: 30rpx;
		background-color: #fff;

		.form-item {
			margin-bottom: 20rpx;
			// display: flex;

			.input-icon {
				width: 26rpx;
				height: 30rpx;
				margin: auto 10rpx;
			}
		}

		.submit-btn {
			margin-top: 150rpx;
		}
		
		.go-login{
			margin-top: 80rpx;
			font-size: 26rpx;
			color: #999999;
			text-align: center;
		}
	}
</style>